<template>
  <div>
    <search-component :colum="colum" :formValue="formValue" class="search"
                      @search="search" @reset="reset"></search-component>
    <vxe-grid
        border
        resizable
        export-config
        import-config
        keep-source
        tableId="data-table"
        ref="xGrid"
        id="toolbar_demo_1"
        height="680"
        :loading="tableLoading"
        :toolbar="tableToolbar"
        :data="tableData"
        :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
        :pager-config="pagerConfig"
        @page-change="pageChangeChange"
        @toolbar-button-click="toolbarButtonClickEvent">
      <template slot="buttons">
        <div style="float: right;margin-right: 12px;">
          <el-button icon="el-icon-circle-plus" size="medium" circle  @click="create"></el-button>
        </div>
      </template>
      <vxe-table-column field="Username" title="用户名" sortable>
        <template v-slot="{ row }">
          <span>{{ row.Username }}</span>
        </template>
      </vxe-table-column>
      <vxe-table-column field="Realname" title="姓名" sortable>
        <template v-slot="{ row }">
          <a class="link-name" href="#" target="_black" @click.prevent="editTable(row)">{{ row.Realname }}</a>
        </template>
      </vxe-table-column>
      <vxe-table-column field="Sex" title="性别" sortable>
        <template v-slot="{ row }">
          <span>{{ statusFilterOptions(row.Sex, 'SEX') }}</span>
        </template>
      </vxe-table-column>
      <vxe-table-column field="Phone" title="手机号" sortable>
        <template v-slot="{ row }">
          <span>{{ row.Phone }}</span>
        </template>
      </vxe-table-column>
      <vxe-table-column field="Lasted" title="上次登录" sortable>
        <template v-slot="{ row }">
          <span>{{ formatDatetime(row.Lasted * 1000) }}</span>
        </template>
      </vxe-table-column>
      <vxe-table-column field="Status" title="状态" sortable>
        <template v-slot="{ row }">
          <span>{{ statusFilterOptions(row.Status, 'USER_STATUS') }}</span>
        </template>
      </vxe-table-column>
      <vxe-table-column field="Opear" title="操作" width="150px" align="center">
        <template v-slot="{ row }">
          <vxe-button status="primary" @click="editTable(row)" size="small">编辑</vxe-button>
          <vxe-button status="primary" @click="disableData(row)" size="small">{{row.Status === 1 ? '禁用' : '启用'}}</vxe-button>
        </template>
      </vxe-table-column>
    </vxe-grid>
    <uesrManageEdit :visible.sync="editVisible" :title="title" :formData="formData" @saveClose="search"
                    :editModel="editModel" :Password="formData.Password"/>
  </div>
</template>

<script>
import searchComponent from "@/components/element/layoutComponents/searchFrom/searchComponent.vue";
import DictionarySelect from "@/components/element/select/DictionarySelect";
import userApi from '@/api/organizationApi/userApi'
import { mapGetters } from 'vuex';
import uesrManageEdit from "./uesrManageEdit";
import * as format from '@/filters/index'
export default {
  components: {
    searchComponent,
    uesrManageEdit
  },
  data () {
    return {
      editModel: '',
      formData: {},
      Departid: '',
      Positionid: '',
      title: '',
      editVisible: false,
      tableLoading: false, // 表格转圈
      tableData: [],
      formValue: {
        p: 1,
        pageoffset: 15
      },
      tableToolbar: {
        refresh: {query: this.search},
        export: true,
        print: true,
        zoom: true,
        custom: true
      },
      colum: [
        {
          placeholder: '用户状态',
          prop: 'status',
          size: 'small',
          dictTypeCode: 'USER_STATUS',
          componentName: DictionarySelect,
          value: 'status',
          clearable: true,
          show: true,
          elcolStyle: {
            'width': '200px'
          }
        },
        {
          placeholder: '请输入用户名、姓名',
          prop: 'keywords',
          size: 'small',
          labelWidth: '10px',
          clearable: true,
          componentName: 'el-input',
          value: 'keywords',
          elcolStyle: {
            'width': '200px'
          }
        }
      ],
      pagerConfig: {
        currentPage: 1,
        pageSize: 15,
        total: 0,
        pagerCount: 7,
        pageSizes: [10,15,20,50,100]
      }
    }
  },
  computed: {
    ...mapGetters(['dictionary']),
    statusList () {
      return (DictTypeCode) => {
        return this.dictionary.filter(item => item.DictTypeCode === DictTypeCode)
      }
    },
    statusFilterOptions () {
      return (cellValue, DictTypeCode) => {
        let filter = this.statusList(DictTypeCode).filter(it => it.DictId === cellValue.toString())
        if (filter.length > 0) {
          return filter[0].DictName
        }
        return ''
      }
    },
    formatDatetime () {
      return (val) => {
        return format.formatDatetime(val)
      }
    }
  },
  mounted() {
  },
  methods: {
    disableData (row) {
      row.id = row.Userid
      let a = JSON.parse(JSON.stringify(row))
      a.status = row.Status === 1 ? 2 : 1
      userApi.UpdateUserstatus(a).then(res => {
        if (res) {
          if (res.code === 1) {
            if (row.Status === 1) {
              this.$message.success('禁用成功')
            } else {
              this.$message.success('启用成功')
            }
            this.search()
          } else if (res.code === 0) {
            this.$message.success(res.message)
          }
        }
      })
    },
    // 新增
    create () {
      this.title = '用户新增'
      this.formData = {
        Id: '',
        Username: '',
        Password: '',
        Departid: '',
        Positionid: '',
        Realname:'',
        Sex:'',
        Birth:'',
        Email:'',
        Webchat:'',
        Qq:'',
        Phone:'',
        Tel: '',
        Address: '',
        Emercontact: '',
        Emerphone: '',
      }
      this.editModel = 'C'
      this.editVisible = true
    },
    // 编辑
    editTable (row) {
      this.title = '用户编辑'
      this.formData = JSON.parse(JSON.stringify(row))
      this.formData.Departid = this.formData.Departid + ''
      this.formData.Positionid = this.formData.Positionid + ''
      this.formData.Password = ''
      this.editModel = 'E'
      this.editVisible = true
    },
    // 重置
    reset () {
      this.formValue = {
        p: 1,
        pageoffset: 15
      }
    },
    // 查询
    search () {
      this.tableLoading = true
      userApi.getPage(this.formValue).then(res => {
        this.tableData = res.Users

        this.pagerConfigFun(res)
      }).finally(() => {
        this.tableLoading = false
      })
    },
    pagerConfigFun (res) {
      this.pagerConfig.total = res.Total
    },
    pageChangeChange (pageConfig) {
      this.formValue.p = pageConfig.currentPage
      this.pagerConfig.currentPage = pageConfig.currentPage
      this.formValue.pageoffset = pageConfig.pageSize
      this.pagerConfig.pageSize = pageConfig.pageSize
      this.search()
    },
    toolbarButtonClickEvent () {
    }
  },
  watch: {
  }
}
</script>

<style scoped lang="scss">
.search >>> .vxe-form--item{
  padding: 0 .8em .5em 0 !important;
}
</style>
